<!--
 * @Author: your name
 * @Date: 2021-07-15 10:32:08
 * @LastEditTime: 2021-08-02 13:51:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\productCenter\catalog\update\dialogTable.vue
-->
<template>
  <el-dialog
    title="关联产品"
    append-to-body
    :visible.sync="dialogTableVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    destroy-on-close
    top="10"
    width="70%"
    center
  >
    <v-notes>
      <el-form label-width="160px" :model="searchModel" ref="searchForm" class="search-form" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="产品名称" prop="productName">
              <el-input
                placeholder="请输入"
                v-model="searchModel.productName"
                clearable
                @keyup.enter.native.prevent="searchAttribute"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="SPU编码" prop="spuCode">
              <el-input
                placeholder="请输入"
                v-model="searchModel.spuCode"
                clearable
                @keyup.enter.native.prevent="searchAttribute"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align:right; padding-top: 3px;">
            <el-button
              @click="resetForm('searchForm')"
              icon="el-icon-refresh-left"
              class="white-btn"
            >重置</el-button>
            <el-button
              @click="searchAttribute"
              icon="el-icon-search"
              class="dark-btn search-btn"
            >搜索</el-button>
          </el-col>
        </el-row>
        <!-- <el-row class="search-row">
        </el-row> -->
        <!-- Filter start -->
      </el-form>
    </v-notes>
    <div class="mb-lg">
      <v-table
        :data="tableData"
        ref="multipleTable"
        :listLoading="listLoading"
        :loadingText="loadingText"
        :paginationTotal="total"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        v-on:handleSelectionChange="handleSelection"
        border
        pagination
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
          size="mini"
          label-class-name="table-selection"
        >
        </el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              class="edit-item"
              >{{ scope.row.productName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.defaultImage || ''"
              style="width: 60px; height: 60px; vertical-align: middle"
              fit="fill"
            >
              <div
                slot="placeholder"
                class="image-slot"
                v-loading="true"
                element-loading-text="加载中"
              ></div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="SPU编码"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.spuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ getDictionaryNameByCode('PRODUCTSTATUS', scope.row.productStatus) }}</template>
        </el-table-column>
      </v-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button class="search-btn" @click="onSubmit">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
// import { getAttribute } from '@/api/attribute'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
import { productList, submitRelation } from '@/api/product'
// import { parseTime } from '@/utils'
export default {
  name: 'attributeDialog',
  props: ['openidList', 'productId'],
  components: {
    VTable,
    VNotes
  },
  computed: {
    ...mapGetters(['lookupItems'])
  },
  mixins: [common],
  data () {
    return {
      searchModel: {
        displayStart: 0, // 开始查询条数
        displayLength: 10, // 每页展示条数
        productName: '',
        spuCode: ''
      },
      searchList: {
        productName: '',
        spuId: '',
        skuId: '',
        searchCatalog: [],
        searchCategory: [],
        searchStatus: '',
        searchSort: ''
      },
      tableData: [],
      filteredSpuIdList: [],
      recommendSpuIds: [],
      listLoading: false,
      loadingText: '加载中...',
      total: 0,
      pageSize: 10,
      currentPage: 0,
      selectData: [],
      dialogTableVisible: false
    }
  },
  methods: {
    open () {
      this.tableData = []
      this.dialogTableVisible = true
      this.fetchList()
    },
    close () { // 关闭取消选择
      if (this.selectData.length > 0) {
        this.$confirm('确定离开此页面？如果离开，更改将丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectData = []
          this.dialogTableVisible = false
        }).catch(() => {})
      } else {
        this.dialogTableVisible = false
      }
    },

    fetchRelationList () {
      this.$emit('fetchRelationList')
    },
    fetchSpuIdList () {
      this.$emit('fetchSpuIdList')
    },
    onSubmit () { // 保存选择
      const params = {
        spuId: this.productId.id,
        recommendSpuIds: this.recommendSpuIds
      }
      submitRelation(params)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              this.$confirm('提交成功', {
                confirmButtonText: '确认',
                showCancelButton: false
              })
              this.dialogTableVisible = false
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: this.$t('confirmOK'),
                showCancelButton: false
              })
            }
            this.fetchRelationList()
            this.fetchSpuIdList()
          }
        })
    },
    // 选中项
    handleSelection (val) {
      this.recommendSpuIds = []
      this.selectData = val
      this.selectData.forEach(e => {
        this.recommendSpuIds.push(e.id)
      })
    },
    searchAttribute () {
      this.currentPage = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList (type) {
      this.filteredSpuIdList = []
      this.filteredSpuIdList = this.openidList
      if (type) {
        this.$refs.table.restPage()
        this.currentPage = 0
      }
      this.listLoading = true
      // const self = this
      const params = {
        displayStart: this.currentPage,
        displayLength: this.pageSize,
        spuStatus: 'PRODUCTSTATUS03',
        productName: this.searchModel.productName,
        spuCode: this.searchModel.spuCode,
        filteredSpuIdList: this.filteredSpuIdList
      }
      productList(params)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.tableData = obj.data || []
              this.notFilterData = obj.data
              this.total = obj.total
            } else if (Number(res.code) === 0) {
              this.$confirm(res.msg, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
    },
    // 每页数据数目改变
    pageSizeChange (size) {
      this.pageSize = size
      this.fetchList()
    },
    // 当前页改变
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    },
    resetForm (formName) {
      /* this.isFilter = false */
      this.searchModel.productName = ''
      this.searchModel.spuCode = ''
      this.searchModel.type = ''
      this.searchModel.required = ''
      this.searchModel.attributeName = ''
      this.searchAttribute()
    }
  }
}
</script>
<style scoped>
</style>
